<route lang="json5" type="page">
{
layout: 'default',
style: {
navigationStyle: 'custom',
navigationBarTitleText: '我的',
},
}
</route>

<script setup>

// 用户信息
const userInfo = reactive({
  avatar: '/static/images/jd.png',
  name: '秦玄',
  role: '设备管理员',
  deviceCount: 12,
  alarmCount: 3,
})

// 功能模块数据
const functionModules = reactive([
  { icon: 'warning', text: '我的报警记录', badge: 3, color: '#ff4d4f' },
  { icon: 'monitor', text: '我的设备列表', badge: 12, color: '#1890ff' },
  { icon: 'calendar', text: '值班排班信息', badge: 0, color: '#52c41a' },
  { icon: 'chart', text: '设备数据统计', badge: 0, color: '#722ed1' },
  { icon: 'setting', text: '系统设置', badge: 0, color: '#faad14' },
])

// 系统信息
const systemInfo = reactive({
  version: 'v1.0.0',
  appInfo: '© 2023 智能设备监控系统',
})

function handleUserDetail() {
  // 这里应该跳转到用户详情页面，目前用Toast模拟
  uni.showToast({
    title: '进入用户详情页',
    icon: 'none',
  })
}

// 处理功能模块点击
function handleFunctionClick(item) {
  uni.showToast({
    title: `点击了${item.text}`,
    icon: 'none',
  })
}

// 处理退出登录
function handleLogout() {
  uni.showModal({
    title: '提示',
    content: '确定要退出登录吗？',
    success(res) {
      if (res.confirm) {
        uni.showToast({
          title: '已退出登录',
          icon: 'success',
        })
      }
    },
  })
}
</script>

<template>
  <page-layout
   
  >
    <!-- 头部用户信息 -->
    <view class="user-header">
      <view class="user-nav" @click="handleUserDetail">
        <view class="flex items-center justify-center">
          <image class="avatar" :src="userInfo.avatar" mode="aspectFill" />
        </view>
        <view class="user-name text-center">
          <view class="font-bold text-xl text-white">
            {{ userInfo.name }}
          </view>
        </view>
        <view class="user-role">
          <view class="user-tag text-xs">
            {{ userInfo.role }}
          </view>
        </view>
      </view>
    </view>
    <!-- 功能模块区 -->
    <view class="function-modules bg-white m-3 p-4 rounded">
      <view
        v-for="(item, index) in functionModules" :key="index"
        class="function-item flex items-center justify-between py-3"
        :class="{ 'border-b border-gray-100': index !== functionModules.length - 1 }"
        @click="handleFunctionClick(item)"
      >
        <view class="flex items-center">
          <view class="icon-bg flex items-center justify-center" :style="{ backgroundColor: `${item.color}10` }">
            <wd-icon :name="item.icon" size="20px" :color="item.color" />
          </view>
          <text class="ml-3">
            {{ item.text }}
          </text>
        </view>
        <view class="flex items-center">
          <view v-if="item.badge > 0" class="mr-2 badge-small">
            {{ item.badge }}
          </view>
          <wd-icon name="arrow-right" size="16px" color="#999" />
        </view>
      </view>
    </view>
    <!-- 系统信息区 -->
    <view class="system-info m-3 p-4 flex flex-col items-center">
      <view class="text-gray-500 text-sm mb-2">
        {{ systemInfo.version }}
      </view>
      <view class="text-gray-400 text-xs mb-6">
        {{ systemInfo.appInfo }}
      </view>
      <wd-button size="large" class="logout-btn" @click="handleLogout">
        退出登录
      </wd-button>
    </view>
  </page-layout>
</template>

<style scoped lang="scss">
.user-header {
  height: 340rpx;
  background-image: linear-gradient(45deg, #0081ff, #1cbbb4);
  //border-radius: 40rpx;
  //margin: 20rpx;
  padding: 30rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);

  .user-nav {
    display: flex;
    flex-direction: column;
    height: 100%;
    margin-top: 50rpx;
    .flex.items-center {
      margin-top: 10rpx;
    }

    .user-name {
      margin-top: 15rpx;

      .font-bold {
        letter-spacing: 2rpx;
        text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
      }
    }

    .user-role {
      display: flex;
      justify-content: center;
      margin-top: 10rpx;
      margin-bottom: 10rpx;
    }
  }

  .user-stats {
    margin-top: 20rpx;
    width: 100%;
    justify-content: space-around;

    .stat-item {
      text-align: center;
      color: white;

      .stat-value {
        font-size: 36rpx;
        font-weight: bold;
      }

      .stat-label {
        font-size: 24rpx;
        opacity: 0.8;
      }
    }
  }
}

.avatar {
  width: 120rpx;
  height: 120rpx;
  border-radius: 50%;
  border: 4rpx solid rgba(255, 255, 255, 0.3);
}

.user-tag {
  color: white;
  background-color: rgba(255, 255, 255, 0.2);
  padding: 4rpx 16rpx;
  border-radius: 20rpx;
  display: inline-block;
}

.function-modules {
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);

  .function-item {
    .icon-bg {
      width: 80rpx;
      height: 80rpx;
      border-radius: 16rpx;
    }
  }
}

.badge-small {
  background-color: #ff4d4f;
  color: white;
  font-size: 20rpx;
  padding: 2rpx 10rpx;
  border-radius: 20rpx;
  min-width: 32rpx;
  text-align: center;
}

.system-info {
  .logout-btn {
    width: 80%;
  }
}
</style>
